<template>
	<div id="c1"></div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
	name: 'antvG2',
	data() {
		return {
			chart: null
		};
	},
	props: {
		data: Array,
		WHAttr: Object
	},
	mounted() {
		this.initG2();
	},
	methods: {
		initG2() {
			let colors=['#025DF4', '#DB6BCF', '#2498D1', '#BBBDE6', '#4045B2', '#21A97A', '#FF745A', '#007E99', '#FFA8A8', '#2391FF']
			this.chart && this.chart.destory();
			this.chart = new Chart({
				container: 'c1', // 指定图表容器 ID
				width: this.WHAttr.width, // 指定图表宽度
				height: this.WHAttr.height, // 指定图表高度
				appendPadding: this.WHAttr.padding, // 图形的内边距
			});
			/**
			 * point 散點圖
			 * line 、 path 綫性、折現
			 * interval （柱形，玫瑰，条形、直方图、玫瑰）
			 * */
			this.chart
				.data(this.data)
				// .axis('genre', false)    //不显示genre坐标轴，
				.interval({
					background: {							// 柱形阴影样式
						style: {
							radius: 8,
						},
					},
				})
				// color 主子的颜色，也是控制tooltip
				// .color('type',['#40a9ff', '#1890ff', '#096dd9', '#0050b3'])
				.label('value',{
					content:(val)=>{       // 柱子上显示
							console.log(val)
							return val.type
						}
					})
				.style('time',val=>{
					// console.log(val)   //val代表x轴的每一个，返回值可以判断val对柱子添加不一样的样式
						return {
							fillOpacity: 0.4,
							lineWidth: 1,
							stroke: '#636363',
							lineDash: [3, 2]
						}
					}
				)
				// .position('time*value')
				// .adjust('stack')
				// this.chart.tooltip({
				// 		shared: true,
				// 		showMarkers: false,
				// 	})
					.interaction('active-region') //柱子选中的效果
				this.chart.legend({
						position:'right'
					})
			this.chart.render(true); //指定渲染引擎，默认使用 canvas。
		}
	}
};
</script>

<style></style>
